<template>
  <div class="pbox">
    <Box title="设备运行监控">
      <div class="topBox">
        <div class="leftBtn" @click="fyFn('top')" @dbclick="fyFn('top')"></div>
        <div class="centerBox">
          <BaseButton
            v-for="item in btnArr"
            class="btns"
            :checked="item.checked"
            @click="btnFn(item)"
            >{{ item.text }}
          </BaseButton>
        </div>
        <div
          class="rightBtn"
          @click="fyFn('bottom')"
          @dbclick="fyFn('bottom')"
        ></div>
      </div>
      <div class="bottomBox">
        <div>
          <h3 class="h3">{{ nowDevice.name }}</h3>
        </div>
        <ul>
          <li v-for="item in nowDevice.sections" class="listLi">
            <div class="titleTop" @click="item.open = item.open ? false : true">
              <div>{{ item.title }}</div>
              <div>
                <el-icon
                  class="icons"
                  v-if="item.open ? false : true"
                  ><Minus
                /></el-icon>
                <el-icon class="icons" v-else>
                  <Plus
                /></el-icon>
              </div>
            </div>
            <template v-if="item.open ? false : true">
              <div class="grids">
                <div v-for="son in item.items" class="items">
                  <div class="itemsSon">
                    <div class="itemsSonImg">
                      <img width="30" :src="son.img" />
                    </div>
                    <div class="itemsSonName">{{ son.title }}</div>
                  </div>
                  <div class="itemsSon">
                    <div class="itemSonStatus">{{ son.status }}</div>
                    <div class="itemSonStatus">{{ son.status2 }}</div>
                  </div>
                  <div class="itemsSon">
                    <div>
                      <img :src="son.img2" width="30" />
                    </div>
                    <div>{{ son.value }}</div>
                  </div>
                </div>
              </div>
            </template>
          </li>
        </ul>
        <!-- <div v-for="item in nowDevice.sections">
          <div class="titleTop">
            <div>{{ item.title }}</div>
            <div>
              <el-icon class="icons"><Minus /></el-icon>
              <el-icon class="icons"><Plus /></el-icon>
            </div>
          </div>
        </div> -->
      </div>
    </Box>
  </div>
</template>
<script setup>
import Box from "@/components/Box/index.vue";
import BaseButton from "@/components/Button/btn.vue";
import { reactive, ref, computed } from "vue";
import { ElIcon } from "element-plus";
import { Minus, Plus } from "@element-plus/icons-vue";
const checkedID = ref(1);

const nowDevice = computed(() => {
  let temp = {};
  for (let i = 0; i < deviceList.value.length; i++) {
    if (deviceList.value[i].id === checkedID.value) {
      temp = deviceList.value[i];
      break;
    }
  }
  return temp;
});
const btnArr = reactive([
  {
    id: 1,
    text: "蒙大矿业",
    checked: true,
  },
  {
    id: 2,
    text: "伊化矿业",
    checked: false,
  },
  {
    id: 3,
    text: "南梁矿业",
    checked: false,
  },
]);

const allBtnArr = reactive([
  {
    id: 1,
    text: "蒙大矿业",
    checked: true,
  },
  {
    id: 2,
    text: "伊化矿业",
    checked: false,
  },
  {
    id: 3,
    text: "南梁矿业",
    checked: false,
  },
  {
    id: 4,
    text: "金通矿业",
    checked: false,
  },
  {
    id: 5,
    text: "葫芦素矿业",
    checked: false,
  },
  {
    id: 6,
    text: "门克庆矿业",
    checked: false,
  },
]);
// 当前下标
const start = ref(0);
const end = ref(2);
function fyFn(str) {
  if (str == "top") {
    if (start.value == 0) {
      return;
    } else {
      start.value--;
      end.value--;
      // 起始位置+1
      btnArr.unshift(allBtnArr[start.value]);
      btnArr.pop();
    }
  } else {
    if (end.value === allBtnArr.length - 1) {
      return;
    } else {
      // 起始位置减一
      start.value++;
      end.value++;
      btnArr.push(allBtnArr[end.value]);
      btnArr.shift();
    }
  }
}
function btnFn(item) {
  checkedID.value = item.id;
  // 将其他按钮设置成false
  btnArr.forEach((element) => {
    if (item.text === element.text) {
      element.checked = true;
    } else {
      element.checked = false;
    }
  });

  allBtnArr.forEach((element) => {
    if (item.text === element.text) {
      element.checked = true;
    } else {
      element.checked = false;
    }
  });
}

// 设备树 数组
const deviceList = ref([
  {
    id: 1,
    name: "综采工作面",
    sections: [
      {
        title: "31204工作面",
        items: [
          {
            img: "/layout/caimeiji.png",
            title: "采煤机",
            status: "运行状态",
            status2: "位置架",
            img2: "/layout/hui.png",
            value: 85,
          },
          {
            img: "/layout/a-zongcaizhijiaicon2x.png",
            title: "液压支架",
            status: "压力超限",
            status2: "",
            img2: "/layout/zuhe1.png",
            value: 0,
          },
          {
            img: "/layout/a-zongcaizhijiaicon2x.png",
            title: "前部刮板输送机",
            status: "运行状态",
            status2: "电流",
            img2: "/layout/zuhe1.png",
            value: "0.0A",
          },
          {
            img: "/layout/a-zongcaizhijiaicon2x.png",
            title: "转载机",
            status: "运行状态",
            status2: "电流",
            img2: "/layout/zuhe1.png",
            value: "0.0A",
          },
          {
            img: "/layout/a-zongcaizhijiaicon2x.png",
            title: "破碎机",
            status: "运行状态",
            status2: "电流",
            img2: "/layout/zuhe1.png",
            value: "0.0A",
          },
          {
            img: "/layout/a-zongcaizhijiaicon2x.png",
            title: "1#乳化泵",
            status: "运行状态",
            status2: "运行",
            img2: "/layout/zuhe1.png",
            value: "66.0A",
          },
          {
            img: "/layout/a-zongcaizhijiaicon2x.png",
            title: "2#乳化泵",
            status: "运行状态",
            status2: "运行",
            img2: "/layout/hui.png",
            value: "0.0A",
          },
          {
            img: "/layout/a-zongcaizhijiaicon2x.png",
            title: "3#乳化泵",
            status: "运行状态",
            status2: "运行",
            img2: "/layout/zuhe1.png",
            value: "66.0A",
          },
          {
            img: "/layout/a-zongcaizhijiaicon2x.png",
            title: "4#乳化泵",
            status: "运行状态",
            status2: "运行",
            img2: "/layout/hui.png",
            value: "0.0A",
          },
          {
            img: "/layout/a-zongcaizhijiaicon2x.png",
            title: "1#喷雾泵",
            status: "运行状态",
            status2: "运行",
            img2: "/layout/zuhe1.png",
            value: "66.0A",
          },
          {
            img: "/layout/a-zongcaizhijiaicon2x.png",
            title: "2#喷雾泵",
            status: "运行状态",
            status2: "运行",
            img2: "/layout/hui.png",
            value: "0.0A",
          },
        ],
      },
      {
        title: "主运输",
        items: [
          {
            img: " /layout/a-28tongfengfengshan.png",
            title: "203盘区1#胶带",
            status: "运行状态",
            status2: "速度",
            img2: " /layout/zuhe1.png",
            value: "0.0M/S",
          },
          {
            img: " /layout/a-28tongfengfengshan.png",
            title: "3-1煤巷道二部皮带",
            status: "运行状态",
            status2: "速度",
            img2: " /layout/zuhe1.png",
            value: "3.4M/S",
          },
          {
            img: " /layout/a-28tongfengfengshan.png",
            title: "31204顺槽胶带",
            status: "运行状态",
            status2: "速度",
            img2: " /layout/zuhe1.png",
            value: "3.63M/S",
          },
        ],
      },
      {
        title: "排水系统",
        items: [
          {
            img: " /layout/a-28tongfengfengshan.png",
            title: "1号水泵",
            status: "运行状态",
            status2: "风量",
            img2: " /layout/zuhe1.png",
            value: "186.6m³/h",
          },
          {
            img: " /layout/a-28tongfengfengshan.png",
            title: "2号水泵",
            status: "运行状态",
            status2: "排水量",
            img2: " /layout/hui.png",
            value: "0.0m³/h",
          },
          {
            img: " /layout/a-28tongfengfengshan.png",
            title: "3号水泵",
            status: "运行状态",
            status2: "排水量",
            img2: " /layout/zuhe1.png",
            value: "153.2m³/h",
          },
          {
            img: " /layout/a-28tongfengfengshan.png",
            title: "4号水泵",
            status: "运行状态",
            status2: "排水量",
            img2: " /layout/hui.png",
            value: "0.0m³/h",
          },
          {
            img: " /layout/a-28tongfengfengshan.png",
            title: "5号水泵",
            status: "运行状态",
            status2: "排水量",
            img2: " /layout/hui.png",
            value: "0.0m³/h",
          },
        ],
      },
      {
        title: "通风系统",
        items: [
          {
            img: " /layout/a-28tongfengfengshan.png",
            title: "1号风机",
            status: "运行状态",
            status2: "风量",
            img2: " /layout/hui.png",
            value: "0.0m³/S",
          },
          {
            img: " /layout/a-28tongfengfengshan.png",
            title: "2号风机",
            status: "运行状态",
            status2: "风量",
            img2: " /layout/zuhe1.png",
            value: "125.2m³/S",
          },
        ],
      },
    ],
  },
  {
    id: 2,
    name: "综采工作面",
    sections: [
      {
        title: "31204工作面",
        items: [
          {
            img: " /layout/caimeiji.png",
            title: "采煤机",
            status: "运行状态",
            status2: "位置架",
            img2: " /layout/hui.png",
            value: 85,
          },
          {
            img: " /layout/a-zongcaizhijiaicon2x.png",
            title: "液压支架",
            status: "压力超限",
            status2: "",
            img2: " /layout/zuhe1.png",
            value: 0,
          },
          {
            img: " /layout/a-zongcaizhijiaicon2x.png",
            title: "前部刮板输送机",
            status: "运行状态",
            status2: "电流",
            img2: " /layout/zuhe1.png",
            value: "0.0A",
          },
          {
            img: " /layout/a-zongcaizhijiaicon2x.png",
            title: "转载机",
            status: "运行状态",
            status2: "电流",
            img2: " /layout/zuhe1.png",
            value: "0.0A",
          },
          {
            img: " /layout/a-zongcaizhijiaicon2x.png",
            title: "破碎机",
            status: "运行状态",
            status2: "电流",
            img2: " /layout/zuhe1.png",
            value: "0.0A",
          },
          {
            img: " /layout/a-zongcaizhijiaicon2x.png",
            title: "1#乳化泵",
            status: "运行状态",
            status2: "运行",
            img2: " /layout/zuhe1.png",
            value: "66.0A",
          },
          {
            img: " /layout/a-zongcaizhijiaicon2x.png",
            title: "2#乳化泵",
            status: "运行状态",
            status2: "运行",
            img2: " /layout/hui.png",
            value: "0.0A",
          },
          {
            img: " /layout/a-zongcaizhijiaicon2x.png",
            title: "3#乳化泵",
            status: "运行状态",
            status2: "运行",
            img2: " /layout/zuhe1.png",
            value: "66.0A",
          },
          {
            img: " /layout/a-zongcaizhijiaicon2x.png",
            title: "4#乳化泵",
            status: "运行状态",
            status2: "运行",
            img2: " /layout/hui.png",
            value: "0.0A",
          },
          {
            img: " /layout/a-zongcaizhijiaicon2x.png",
            title: "1#喷雾泵",
            status: "运行状态",
            status2: "运行",
            img2: " /layout/zuhe1.png",
            value: "66.0A",
          },
          {
            img: " /layout/a-zongcaizhijiaicon2x.png",
            title: "2#喷雾泵",
            status: "运行状态",
            status2: "运行",
            img2: " /layout/hui.png",
            value: "0.0A",
          },
        ],
      },
      {
        title: "主运输",
        items: [
          {
            img: " /layout/a-28tongfengfengshan.png",
            title: "203盘区1#胶带",
            status: "运行状态",
            status2: "速度",
            img2: " /layout/zuhe1.png",
            value: "0.0M/S",
          },
          {
            img: " /layout/a-28tongfengfengshan.png",
            title: "3-1煤巷道二部皮带",
            status: "运行状态",
            status2: "速度",
            img2: " /layout/zuhe1.png",
            value: "3.4M/S",
          },
          {
            img: " /layout/a-28tongfengfengshan.png",
            title: "31204顺槽胶带",
            status: "运行状态",
            status2: "速度",
            img2: " /layout/zuhe1.png",
            value: "3.63M/S",
          },
        ],
      },
      {
        title: "排水系统",
        items: [
          {
            img: " /layout/a-28tongfengfengshan.png",
            title: "1号水泵",
            status: "运行状态",
            status2: "风量",
            img2: " /layout/zuhe1.png",
            value: "186.6m³/h",
          },
          {
            img: " /layout/a-28tongfengfengshan.png",
            title: "2号水泵",
            status: "运行状态",
            status2: "排水量",
            img2: " /layout/hui.png",
            value: "0.0m³/h",
          },
          {
            img: " /layout/a-28tongfengfengshan.png",
            title: "3号水泵",
            status: "运行状态",
            status2: "排水量",
            img2: " /layout/zuhe1.png",
            value: "153.2m³/h",
          },
          {
            img: " /layout/a-28tongfengfengshan.png",
            title: "4号水泵",
            status: "运行状态",
            status2: "排水量",
            img2: " /layout/hui.png",
            value: "0.0m³/h",
          },
          {
            img: " /layout/a-28tongfengfengshan.png",
            title: "5号水泵",
            status: "运行状态",
            status2: "排水量",
            img2: " /layout/hui.png",
            value: "0.0m³/h",
          },
        ],
      },
      {
        title: "通风系统",
        items: [
          {
            img: " /layout/a-28tongfengfengshan.png",
            title: "1号风机",
            status: "运行状态",
            status2: "风量",
            img2: " /layout/hui.png",
            value: "0.0m³/S",
          },
          {
            img: " /layout/a-28tongfengfengshan.png",
            title: "2号风机",
            status: "运行状态",
            status2: "风量",
            img2: " /layout/zuhe1.png",
            value: "125.2m³/S",
          },
        ],
      },
    ],
  },
  {
    id: 3,
    name: "综采工作面",
    sections: [
      {
        title: "31204工作面",
        items: [
          {
            img: " /layout/caimeiji.png",
            title: "采煤机",
            status: "运行状态",
            status2: "位置架",
            img2: " /layout/hui.png",
            value: 85,
          },
          {
            img: " /layout/a-zongcaizhijiaicon2x.png",
            title: "液压支架",
            status: "压力超限",
            status2: "",
            img2: " /layout/zuhe1.png",
            value: 0,
          },
          {
            img: " /layout/a-zongcaizhijiaicon2x.png",
            title: "前部刮板输送机",
            status: "运行状态",
            status2: "电流",
            img2: " /layout/zuhe1.png",
            value: "0.0A",
          },
          {
            img: " /layout/a-zongcaizhijiaicon2x.png",
            title: "转载机",
            status: "运行状态",
            status2: "电流",
            img2: " /layout/zuhe1.png",
            value: "0.0A",
          },
          {
            img: " /layout/a-zongcaizhijiaicon2x.png",
            title: "破碎机",
            status: "运行状态",
            status2: "电流",
            img2: " /layout/zuhe1.png",
            value: "0.0A",
          },
          {
            img: " /layout/a-zongcaizhijiaicon2x.png",
            title: "1#乳化泵",
            status: "运行状态",
            status2: "运行",
            img2: " /layout/zuhe1.png",
            value: "66.0A",
          },
          {
            img: " /layout/a-zongcaizhijiaicon2x.png",
            title: "2#乳化泵",
            status: "运行状态",
            status2: "运行",
            img2: " /layout/hui.png",
            value: "0.0A",
          },
          {
            img: " /layout/a-zongcaizhijiaicon2x.png",
            title: "3#乳化泵",
            status: "运行状态",
            status2: "运行",
            img2: " /layout/zuhe1.png",
            value: "66.0A",
          },
          {
            img: " /layout/a-zongcaizhijiaicon2x.png",
            title: "4#乳化泵",
            status: "运行状态",
            status2: "运行",
            img2: " /layout/hui.png",
            value: "0.0A",
          },
          {
            img: " /layout/a-zongcaizhijiaicon2x.png",
            title: "1#喷雾泵",
            status: "运行状态",
            status2: "运行",
            img2: " /layout/zuhe1.png",
            value: "66.0A",
          },
          {
            img: " /layout/a-zongcaizhijiaicon2x.png",
            title: "2#喷雾泵",
            status: "运行状态",
            status2: "运行",
            img2: " /layout/hui.png",
            value: "0.0A",
          },
        ],
      },
      {
        title: "主运输",
        items: [
          {
            img: " /layout/a-28tongfengfengshan.png",
            title: "203盘区1#胶带",
            status: "运行状态",
            status2: "速度",
            img2: " /layout/zuhe1.png",
            value: "0.0M/S",
          },
          {
            img: " /layout/a-28tongfengfengshan.png",
            title: "3-1煤巷道二部皮带",
            status: "运行状态",
            status2: "速度",
            img2: " /layout/zuhe1.png",
            value: "3.4M/S",
          },
          {
            img: " /layout/a-28tongfengfengshan.png",
            title: "31204顺槽胶带",
            status: "运行状态",
            status2: "速度",
            img2: " /layout/zuhe1.png",
            value: "3.63M/S",
          },
        ],
      },
      {
        title: "排水系统",
        items: [
          {
            img: "/layout/a-28tongfengfengshan.png",
            title: "1号水泵",
            status: "运行状态",
            status2: "风量",
            img2: " /layout/zuhe1.png",
            value: "186.6m³/h",
          },
          {
            img: "/layout/a-28tongfengfengshan.png",
            title: "2号水泵",
            status: "运行状态",
            status2: "排水量",
            img2: " /layout/hui.png",
            value: "0.0m³/h",
          },
          {
            img: "/layout/a-28tongfengfengshan.png",
            title: "3号水泵",
            status: "运行状态",
            status2: "排水量",
            img2: "/layout/zuhe1.png",
            value: "153.2m³/h",
          },
          {
            img: "/layout/a-28tongfengfengshan.png",
            title: "4号水泵",
            status: "运行状态",
            status2: "排水量",
            img2: " /layout/hui.png",
            value: "0.0m³/h",
          },
          {
            img: "/layout/a-28tongfengfengshan.png",
            title: "5号水泵",
            status: "运行状态",
            status2: "排水量",
            img2: " /layout/hui.png",
            value: "0.0m³/h",
          },
        ],
      },
      {
        title: "通风系统",
        items: [
          {
            img: " /layout/a-28tongfengfengshan.png",
            title: "1号风机",
            status: "运行状态",
            status2: "风量",
            img2: " /layout/hui.png",
            value: "0.0m³/S",
          },
          {
            img: " /layout/a-28tongfengfengshan.png",
            title: "2号风机",
            status: "运行状态",
            status2: "风量",
            img2: " /layout/zuhe1.png",
            value: "125.2m³/S",
          },
        ],
      },
    ],
  },
  {
    id: 4,
    name: "综采工作面",
    sections: [
      {
        title: "31204工作面",
        items: [
          {
            img: " /layout/caimeiji.png",
            title: "采煤机",
            status: "运行状态",
            status2: "位置架",
            img2: " /layout/hui.png",
            value: 85,
          },
          {
            img: " /layout/a-zongcaizhijiaicon2x.png",
            title: "液压支架",
            status: "压力超限",
            status2: "",
            img2: " /layout/zuhe1.png",
            value: 0,
          },
          {
            img: " /layout/a-zongcaizhijiaicon2x.png",
            title: "前部刮板输送机",
            status: "运行状态",
            status2: "电流",
            img2: " /layout/zuhe1.png",
            value: "0.0A",
          },
          {
            img: " /layout/a-zongcaizhijiaicon2x.png",
            title: "转载机",
            status: "运行状态",
            status2: "电流",
            img2: " /layout/zuhe1.png",
            value: "0.0A",
          },
          {
            img: " /layout/a-zongcaizhijiaicon2x.png",
            title: "破碎机",
            status: "运行状态",
            status2: "电流",
            img2: " /layout/zuhe1.png",
            value: "0.0A",
          },
          {
            img: " /layout/a-zongcaizhijiaicon2x.png",
            title: "1#乳化泵",
            status: "运行状态",
            status2: "运行",
            img2: " /layout/zuhe1.png",
            value: "66.0A",
          },
          {
            img: " /layout/a-zongcaizhijiaicon2x.png",
            title: "2#乳化泵",
            status: "运行状态",
            status2: "运行",
            img2: " /layout/hui.png",
            value: "0.0A",
          },
          {
            img: " /layout/a-zongcaizhijiaicon2x.png",
            title: "3#乳化泵",
            status: "运行状态",
            status2: "运行",
            img2: " /layout/zuhe1.png",
            value: "66.0A",
          },
          {
            img: " /layout/a-zongcaizhijiaicon2x.png",
            title: "4#乳化泵",
            status: "运行状态",
            status2: "运行",
            img2: " /layout/hui.png",
            value: "0.0A",
          },
          {
            img: " /layout/a-zongcaizhijiaicon2x.png",
            title: "1#喷雾泵",
            status: "运行状态",
            status2: "运行",
            img2: " /layout/zuhe1.png",
            value: "66.0A",
          },
          {
            img: " /layout/a-zongcaizhijiaicon2x.png",
            title: "2#喷雾泵",
            status: "运行状态",
            status2: "运行",
            img2: " /layout/hui.png",
            value: "0.0A",
          },
        ],
      },
      {
        title: "主运输",
        items: [
          {
            img: " /layout/a-28tongfengfengshan.png",
            title: "203盘区1#胶带",
            status: "运行状态",
            status2: "速度",
            img2: " /layout/zuhe1.png",
            value: "0.0M/S",
          },
          {
            img: " /layout/a-28tongfengfengshan.png",
            title: "3-1煤巷道二部皮带",
            status: "运行状态",
            status2: "速度",
            img2: " /layout/zuhe1.png",
            value: "3.4M/S",
          },
          {
            img: " /layout/a-28tongfengfengshan.png",
            title: "31204顺槽胶带",
            status: "运行状态",
            status2: "速度",
            img2: " /layout/zuhe1.png",
            value: "3.63M/S",
          },
        ],
      },
      {
        title: "排水系统",
        items: [
          {
            img: " /layout/a-28tongfengfengshan.png",
            title: "1号水泵",
            status: "运行状态",
            status2: "风量",
            img2: " /layout/zuhe1.png",
            value: "186.6m³/h",
          },
          {
            img: " /layout/a-28tongfengfengshan.png",
            title: "2号水泵",
            status: "运行状态",
            status2: "排水量",
            img2: " /layout/hui.png",
            value: "0.0m³/h",
          },
          {
            img: " /layout/a-28tongfengfengshan.png",
            title: "3号水泵",
            status: "运行状态",
            status2: "排水量",
            img2: " /layout/zuhe1.png",
            value: "153.2m³/h",
          },
          {
            img: " /layout/a-28tongfengfengshan.png",
            title: "4号水泵",
            status: "运行状态",
            status2: "排水量",
            img2: " /layout/hui.png",
            value: "0.0m³/h",
          },
          {
            img: " /layout/a-28tongfengfengshan.png",
            title: "5号水泵",
            status: "运行状态",
            status2: "排水量",
            img2: " /layout/hui.png",
            value: "0.0m³/h",
          },
        ],
      },
      {
        title: "通风系统",
        items: [
          {
            img: " /layout/a-28tongfengfengshan.png",
            title: "1号风机",
            status: "运行状态",
            status2: "风量",
            img2: " /layout/hui.png",
            value: "0.0m³/S",
          },
          {
            img: " /layout/a-28tongfengfengshan.png",
            title: "2号风机",
            status: "运行状态",
            status2: "风量",
            img2: " /layout/zuhe1.png",
            value: "125.2m³/S",
          },
        ],
      },
    ],
  },
  {
    id: 5,
    name: "综采工作面",
    sections: [
      {
        title: "31204工作面",
        items: [
          {
            img: " /layout/caimeiji.png",
            title: "采煤机",
            status: "运行状态",
            status2: "位置架",
            img2: " /layout/hui.png",
            value: 85,
          },
          {
            img: " /layout/a-zongcaizhijiaicon2x.png",
            title: "液压支架",
            status: "压力超限",
            status2: "",
            img2: " /layout/zuhe1.png",
            value: 0,
          },
          {
            img: " /layout/a-zongcaizhijiaicon2x.png",
            title: "前部刮板输送机",
            status: "运行状态",
            status2: "电流",
            img2: " /layout/zuhe1.png",
            value: "0.0A",
          },
          {
            img: " /layout/a-zongcaizhijiaicon2x.png",
            title: "转载机",
            status: "运行状态",
            status2: "电流",
            img2: " /layout/zuhe1.png",
            value: "0.0A",
          },
          {
            img: " /layout/a-zongcaizhijiaicon2x.png",
            title: "破碎机",
            status: "运行状态",
            status2: "电流",
            img2: " /layout/zuhe1.png",
            value: "0.0A",
          },
          {
            img: " /layout/a-zongcaizhijiaicon2x.png",
            title: "1#乳化泵",
            status: "运行状态",
            status2: "运行",
            img2: " /layout/zuhe1.png",
            value: "66.0A",
          },
          {
            img: " /layout/a-zongcaizhijiaicon2x.png",
            title: "2#乳化泵",
            status: "运行状态",
            status2: "运行",
            img2: " /layout/hui.png",
            value: "0.0A",
          },
          {
            img: " /layout/a-zongcaizhijiaicon2x.png",
            title: "3#乳化泵",
            status: "运行状态",
            status2: "运行",
            img2: " /layout/zuhe1.png",
            value: "66.0A",
          },
          {
            img: " /layout/a-zongcaizhijiaicon2x.png",
            title: "4#乳化泵",
            status: "运行状态",
            status2: "运行",
            img2: " /layout/hui.png",
            value: "0.0A",
          },
          {
            img: " /layout/a-zongcaizhijiaicon2x.png",
            title: "1#喷雾泵",
            status: "运行状态",
            status2: "运行",
            img2: " /layout/zuhe1.png",
            value: "66.0A",
          },
          {
            img: " /layout/a-zongcaizhijiaicon2x.png",
            title: "2#喷雾泵",
            status: "运行状态",
            status2: "运行",
            img2: " /layout/hui.png",
            value: "0.0A",
          },
        ],
      },
      {
        title: "主运输",
        items: [
          {
            img: " /layout/a-28tongfengfengshan.png",
            title: "203盘区1#胶带",
            status: "运行状态",
            status2: "速度",
            img2: " /layout/zuhe1.png",
            value: "0.0M/S",
          },
          {
            img: " /layout/a-28tongfengfengshan.png",
            title: "3-1煤巷道二部皮带",
            status: "运行状态",
            status2: "速度",
            img2: " /layout/zuhe1.png",
            value: "3.4M/S",
          },
          {
            img: " /layout/a-28tongfengfengshan.png",
            title: "31204顺槽胶带",
            status: "运行状态",
            status2: "速度",
            img2: " /layout/zuhe1.png",
            value: "3.63M/S",
          },
        ],
      },
      {
        title: "排水系统",
        items: [
          {
            img: " /layout/a-28tongfengfengshan.png",
            title: "1号水泵",
            status: "运行状态",
            status2: "风量",
            img2: " /layout/zuhe1.png",
            value: "186.6m³/h",
          },
          {
            img: " /layout/a-28tongfengfengshan.png",
            title: "2号水泵",
            status: "运行状态",
            status2: "排水量",
            img2: " /layout/hui.png",
            value: "0.0m³/h",
          },
          {
            img: " /layout/a-28tongfengfengshan.png",
            title: "3号水泵",
            status: "运行状态",
            status2: "排水量",
            img2: " /layout/zuhe1.png",
            value: "153.2m³/h",
          },
          {
            img: " /layout/a-28tongfengfengshan.png",
            title: "4号水泵",
            status: "运行状态",
            status2: "排水量",
            img2: " /layout/hui.png",
            value: "0.0m³/h",
          },
          {
            img: " /layout/a-28tongfengfengshan.png",
            title: "5号水泵",
            status: "运行状态",
            status2: "排水量",
            img2: " /layout/hui.png",
            value: "0.0m³/h",
          },
        ],
      },
      {
        title: "通风系统",
        items: [
          {
            img: " /layout/a-28tongfengfengshan.png",
            title: "1号风机",
            status: "运行状态",
            status2: "风量",
            img2: " /layout/hui.png",
            value: "0.0m³/S",
          },
          {
            img: " /layout/a-28tongfengfengshan.png",
            title: "2号风机",
            status: "运行状态",
            status2: "风量",
            img2: " /layout/zuhe1.png",
            value: "125.2m³/S",
          },
        ],
      },
    ],
  },
  {
    id: 6,
    name: "综采工作面",
    sections: [
      {
        title: "31204工作面",
        items: [
          {
            img: " /layout/caimeiji.png",
            title: "采煤机",
            status: "运行状态",
            status2: "位置架",
            img2: " /layout/hui.png",
            value: 85,
          },
          {
            img: " /layout/a-zongcaizhijiaicon2x.png",
            title: "液压支架",
            status: "压力超限",
            status2: "",
            img2: " /layout/zuhe1.png",
            value: 0,
          },
          {
            img: " /layout/a-zongcaizhijiaicon2x.png",
            title: "前部刮板输送机",
            status: "运行状态",
            status2: "电流",
            img2: " /layout/zuhe1.png",
            value: "0.0A",
          },
          {
            img: " /layout/a-zongcaizhijiaicon2x.png",
            title: "转载机",
            status: "运行状态",
            status2: "电流",
            img2: " /layout/zuhe1.png",
            value: "0.0A",
          },
          {
            img: " /layout/a-zongcaizhijiaicon2x.png",
            title: "破碎机",
            status: "运行状态",
            status2: "电流",
            img2: " /layout/zuhe1.png",
            value: "0.0A",
          },
          {
            img: " /layout/a-zongcaizhijiaicon2x.png",
            title: "1#乳化泵",
            status: "运行状态",
            status2: "运行",
            img2: " /layout/zuhe1.png",
            value: "66.0A",
          },
          {
            img: " /layout/a-zongcaizhijiaicon2x.png",
            title: "2#乳化泵",
            status: "运行状态",
            status2: "运行",
            img2: " /layout/hui.png",
            value: "0.0A",
          },
          {
            img: " /layout/a-zongcaizhijiaicon2x.png",
            title: "3#乳化泵",
            status: "运行状态",
            status2: "运行",
            img2: " /layout/zuhe1.png",
            value: "66.0A",
          },
          {
            img: " /layout/a-zongcaizhijiaicon2x.png",
            title: "4#乳化泵",
            status: "运行状态",
            status2: "运行",
            img2: " /layout/hui.png",
            value: "0.0A",
          },
          {
            img: " /layout/a-zongcaizhijiaicon2x.png",
            title: "1#喷雾泵",
            status: "运行状态",
            status2: "运行",
            img2: " /layout/zuhe1.png",
            value: "66.0A",
          },
          {
            img: " /layout/a-zongcaizhijiaicon2x.png",
            title: "2#喷雾泵",
            status: "运行状态",
            status2: "运行",
            img2: " /layout/hui.png",
            value: "0.0A",
          },
        ],
      },
      {
        title: "主运输",
        items: [
          {
            img: " /layout/a-28tongfengfengshan.png",
            title: "203盘区1#胶带",
            status: "运行状态",
            status2: "速度",
            img2: " /layout/zuhe1.png",
            value: "0.0M/S",
          },
          {
            img: " /layout/a-28tongfengfengshan.png",
            title: "3-1煤巷道二部皮带",
            status: "运行状态",
            status2: "速度",
            img2: " /layout/zuhe1.png",
            value: "3.4M/S",
          },
          {
            img: " /layout/a-28tongfengfengshan.png",
            title: "31204顺槽胶带",
            status: "运行状态",
            status2: "速度",
            img2: " /layout/zuhe1.png",
            value: "3.63M/S",
          },
        ],
      },
      {
        title: "排水系统",
        items: [
          {
            img: " /layout/a-28tongfengfengshan.png",
            title: "1号水泵",
            status: "运行状态",
            status2: "风量",
            img2: " /layout/zuhe1.png",
            value: "186.6m³/h",
          },
          {
            img: " /layout/a-28tongfengfengshan.png",
            title: "2号水泵",
            status: "运行状态",
            status2: "排水量",
            img2: " /layout/hui.png",
            value: "0.0m³/h",
          },
          {
            img: " /layout/a-28tongfengfengshan.png",
            title: "3号水泵",
            status: "运行状态",
            status2: "排水量",
            img2: " /layout/zuhe1.png",
            value: "153.2m³/h",
          },
          {
            img: " /layout/a-28tongfengfengshan.png",
            title: "4号水泵",
            status: "运行状态",
            status2: "排水量",
            img2: " /layout/hui.png",
            value: "0.0m³/h",
          },
          {
            img: " /layout/a-28tongfengfengshan.png",
            title: "5号水泵",
            status: "运行状态",
            status2: "排水量",
            img2: " /layout/hui.png",
            value: "0.0m³/h",
          },
        ],
      },
      {
        title: "通风系统",
        items: [
          {
            img: " /layout/a-28tongfengfengshan.png",
            title: "1号风机",
            status: "运行状态",
            status2: "风量",
            img2: " /layout/hui.png",
            value: "0.0m³/S",
          },
          {
            img: " /layout/a-28tongfengfengshan.png",
            title: "2号风机",
            status: "运行状态",
            status2: "风量",
            img2: " /layout/zuhe1.png",
            value: "125.2m³/S",
          },
        ],
      },
    ],
  },
]);
</script>
<style scoped>
.pbox {
  width: 100%;
  flex: 1;
}
.rightBtn {
  display: flex;
  gap: 10px;
}
.topBox {
  display: flex;
  height: 40px;
}
.bottomBox {
  height: 420px;
  overflow-y: scroll;
  overflow-x: hidden;
}
.leftBtn {
  width: 30px;
  background-image: url("/layout/leftBtn.png");
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  cursor: pointer;
  user-select: none; /* 禁止文本被选中 */
  -webkit-user-select: none; /* Safari兼容 */
  -moz-user-select: none; /* Firefox兼容 */
  -ms-user-select: none; /* IE10+/Edge兼容 */
}

.rightBtn {
  width: 30px;
  background-image: url("/layout/rightBtn.png");
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  cursor: pointer;
  user-select: none; /* 禁止文本被选中 */
  -webkit-user-select: none; /* Safari兼容 */
  -moz-user-select: none; /* Firefox兼容 */
  -ms-user-select: none; /* IE10+/Edge兼容 */
}
.items {
  background-image: url("/layout/top.png");
  background-position: center;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  height: 80px;
}
.centerBox {
  flex: 1;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-evenly;
}
.btns {
  font-size: 14px;
}
.h3 {
  font-size: 16px;
  line-height: 24px;
  padding-top: 10px;
}
.titleTop {
  display: flex;
  justify-content: space-between;
  padding: 5px 0px;
  cursor: pointer;
  user-select: none; /* 禁止文本被选中 */
  -webkit-user-select: none; /* Safari兼容 */
  -moz-user-select: none; /* Firefox兼容 */
  -ms-user-select: none; /* IE10+/Edge兼容 */
  font-size: 14px;
  line-height: 20px;
  font-family: Arial, Helvetica, sans-serif;
  text-decoration: 20px;
}
.icons {
  font-size: 16px;
  font-weight: bold;
}
.listLi {
  margin-left: 20px;
  color: #00fcff;
  margin-top: 10px;
}

.grids {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.items {
  display: flex;
  justify-content: center;
  align-items: center;
}
.itemsSonImg {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.itemsSonName {
  text-align: center;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 12px;
}
.itemsSon {
  flex: 1;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 12px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.itemSonStatus {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 12px;
}

/* Webkit浏览器 */
.bottomBox::-webkit-scrollbar {
  width: 1px;
  height: 1px;
}

.bottomBox::-webkit-scrollbar-track {
  background: #1e1d1d;
  border-radius: 2px;
}

.cbottomBox::-webkit-scrollbar-thumb {
  background-color: #2f303160;
  border-radius: 2px;
}

.bottomBox::-webkit-scrollbar-thumb:hover {
  background-color: #2f303160;
}
</style>
